<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>计划明细添加</title>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript">
	onload=function(){
		<c:if test="${meg!=null}">alert('${meg }')</c:if>
		$('#va').each(function(){
			$(this).blur(sum);
		});
		$('#subm').bind('click',sum);
	}
	function remove(a){
		a.parentNode.parentNode.remove();
		sum();
	}
	function  ne(){
		 $("#nl").append("<tr><td align='right'><input style='text-align:right' name='key' id='dc' type='text' />：</td><td><input name='va' id='va' type='text' /> <a class='redd'   onclick='remove(this)'>-</a></td></tr>");
		$('input[name="va"]').each(function(){
			$(this).blur(sum);
		}); 
		
	}
	function test(){alert('test');}
	function sum(){
		var sum=parseFloat("0");
		$('*[name="va"]').each(function(){
			var s=$(this).val();
			if(s==''){s=0};
			sum+=parseFloat(s);
		})
		
		$("#mo").html(sum+" ￥"); 
		$("#money").val(sum);
	}
	function  check(){
		var flag=0;
		$('*[name="va"]').each(function(){
			var a=$(this).val();
			if(a==''){$(this).css('border-color','red');$(this).val("请输入数字！");flag=1;
			}else{
				var el=/^\d*\.?\d*$/;
				if(!el.test(a)){
					$(this).css('border-color','red');
					$(this).val("成本必须为数字！");
					flag=2;
				}
			}
			
		})
		$('*[name="key"]').each(function(){
			var s=$(this).val();
			if(s==''){$(this).css('border-color','red');
			$(this).val("不能为空！");
			flag=3;}
			
		})
	
		if(flag==0){return true}else{return false;}
		
	}
</script>
<style type="text/css">
	div{margin:0px auto;width:800px;
	padding:0px 20px;font-size:20px;
	}
	body{background-color:#CCC;
	}
	#dc{width:120px;}
	.redd{padding:3px 15px;background-color:orange;}
	a{padding:4px 9px;background-color:orange;color:red;cursor:pointer;}
	input,select,textarea{font-size:18px;width:250px;}
	button,.butt{padding:5px 15px;width:100px}
	button:hover,.butt:hover{background-color:orange;cursor:pointer}
</style>

</head>

<body>
<div>
<h2 align="center">添加计划明细</h2>
	<form action="<%=request.getContextPath() %>/mplan/add" method="post" onsubmit="return check()">
	<input type="text" value="${plan.id }" name="pid" hidden="hidden"/>
	<input type="text" value="${plan.name }" name="pname" hidden="hidden"/>
	<input type="text"  id="money" name="money" hidden="hidden"/>
	<table align="center" height="70%" id="nl">
		<tr>
			<td align="right">所属计划：</td>
			<td><font color="red" id="head" size="6">${plan.name }</font></td>
		</tr><tr>
			<td align="right">明细标题：</td>
			<td><input type="text" name="name"/></td>
		</tr><tr>
			<td align="right">明细内容：</td>
			<td><textarea name="mcontent" rows="3" cols="26"/></textarea></td>
		</tr><tr>
			<td align="right">材料：</td>
			<td align="center">成本(￥)：<button type="button" onclick="ne();">增加</button></td>
		</tr>
		<tr >
			<td align="right"><input style="text-align:right" id="dc" type="text" name="key"/>：</td>
			<td><input type="text"  id="va" name="va"/>
			</td>
		</tr>
		<tfoot>
		<tr >
			<td align="right">总价格：</td>
			<td align="center"><font color="red" id="mo"> ￥</font></td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<input id="subm" class="butt" type="submit" value="添加"/>&nbsp;&nbsp;
				<input class="butt" type="reset" value="重置"/>
			</td>
		</tr>
		</tfoot>
	</table>
	</form>
	</div>
</body>
</html>